<script setup lang="ts">
import {ref, computed, reactive} from "vue";

let firstName = ref('李')
let lastName = ref('四')

// 选项写法
let name = computed<string>({
  get() {
    return firstName.value + '-' + lastName.value
  },
  set(newVal) {
    [firstName.value, lastName.value] = newVal.split('-')
  }
})
const changeName = () => {
  name.value = '张-三'
}

// 函数写法 只能支持一个getter函数不允许修改值
let name2 = computed(() => firstName.value + '-' + lastName.value)

interface Data {
  name: string,
  price: number,
  num: number
}

let data = reactive<Data[]>([
  {name: 'li', price: 11, num: 1},
  {name: 'zhang', price: 22, num: 2}
])
// 原生
let $total = ref<number>(0)
const total = () => {
  $total.value = data.reduce((prev: number, next: Data) => {
    return prev + next.num * next.price
  }, 0)
}
//计算属性
/* const searchData = computed(()=>{
   return data.filter((item:data)=>{
     return item.name.includes(keyWord.value)
   })
 }) */
</script>

<template>
  <div>
    <div>
      姓：<input v-model="firstName" type="text">
    </div>
    <div>
      名：<input v-model="lastName" type="text">
    </div>
    <div>
      全名：{{ name }}
    </div>
    <div>
      全名2：{{ name2 }}
    </div>
    <div>
      <button @click="changeName">changeName</button>
    </div>
  </div>
  <table>
    <tbody>

    </tbody>
    <tfoot>

    </tfoot>
  </table>

</template>

<style scoped>

</style>